import React, { useEffect } from "react";
import "./Focus.css";
import { useState } from "react";

export default function Focus() {
  let [id, setid] = useState(1);

  let next = () => {
    if (id < 5) {
      setid(id + 1);
    } else {
      setid(1);
    }
  };

  let prev = () => {
    if (id > 1) {
      setid(id - 1);
    } else {
      setid(5);
    }
  };

  useEffect(() => {
    let timer = setInterval(() => {
      setid((item) => {
        console.log(item);
        if (item > 4) {
          console.log("执行");
          return 1;
        } else {
          return item + 1;
        }
      });
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <>
      <div className="showimg">
        <img src={`/img/${id}.jpg`} alt="" />
        <div className="btnj next" onClick={next}>
          &gt;
        </div>
        <div className="btnj prev" onClick={prev}>
          &lt;
        </div>
      </div>
    </>
  );
}
